<template>	
	<a-layout style="min-height:100vh;">
		
		<!-- 用户组件：侧边栏 -->
		<a-sider />	
	
		<!--嵌套右侧上中下结构-->
		<a-layout style="min-height:100vh;">
			<AHeader /> <!-- 这样写可以，这使得他类似react组件，但他可能并不真正具有jsx大写组件首字母的含义 -->

			<!-- 
				baselayout嵌套路由可能有点不规范，ant design认为嵌套路由最好用view命名,区别在于路由使用<router-view>匹配 
					布局使用slot填充
			-->
			<a-layout-content>		        
				<router-view></router-view>
      		</a-layout-content>
			
			<a-footer />
		</a-layout>
	</a-layout>
</template>

<script type="text/javascript">
	import { Layout,Breadcrumb,Button } from 'ant-design-vue'
	import {mapGetters} from 'vuex'	
	
	/* 自定义组件明白不要与ant内置组件混淆 */
	import ASider from './baselayout/ASider.vue'
	import AHeader from './baselayout/AHeader.vue'
	import AFooter from './AFooter.vue'

	export default {
		name:"baselayout",
		data(){
			return {
				collapsed: false
			}
		},
		components:{
			ALayout:Layout,
			ALayoutHeader:Layout.Header,
			ALayoutSider:Layout.Sider,
			ALayoutContent:Layout.Content,
			ABreadcrumb:Breadcrumb,
			ABreadcrumbItem:Breadcrumb.Item,
			AButton:Button,
			AHeader,
			ASider,
			AFooter
		},
		methods:{
			logout(){
				this.$store.commit("removeUser");
				this.$router.push("/login")
			}
		},
		computed:{
			...mapGetters (['getUser'])
		}
	}
</script>

